<style lang="sass" scoped>
    .img{
        width:120px;
    }
</style>
<template>
    <div class="container pd15">
        <div class="common_block">
            <div class="head head-default">订单信息</div>
            <div class="contener">
                <el-form label-width="100px">
                    <el-form-item label="订单编号：" prop="xxx">
                        {{info.orderNo}}
                    </el-form-item>
                    <el-form-item label="订单金额：" prop="xxx">
                        {{info.realPayFee}}
                    </el-form-item>
                    <el-form-item label="运费：" prop="xxx">
                        {{info.carriageFee}}
                    </el-form-item>
                    <el-form-item label="下单时间：" prop="xxx">
                        {{info.createTime}}
                    </el-form-item>
                    <el-form-item label="支付时间：" prop="xxx">
                        {{info.payTime}}
                    </el-form-item>
                    <el-form-item label="状态：" prop="xxx">
                        {{info.status | orderStatus}}
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="common_block mt20">
            <div class="head head-default">收件人信息</div>
            <div class="contener">
                <el-form label-width="100px">
                    <el-form-item label="收件人：" prop="xxx">
                        {{info.receiver}}
                    </el-form-item>
                    <el-form-item label="联系方式：" prop="xxx">
                        {{info.receiverPhone}}
                    </el-form-item>
                    <el-form-item label="地区：" prop="xxx">
                        {{info.area}}
                    </el-form-item>
                    <el-form-item label="详细信息：" prop="xxx">
                        {{info.addressDetail}}
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="common_block mt20">
            <div class="head head-default">分销商信息</div>
            <div class="contener">
                <el-form label-width="100px">
                    <el-form-item label="分销商：">
                        {{info.companyName}}
                    </el-form-item>
                    <el-form-item label="提成比例：">
                        {{info.commissionRate}}
                    </el-form-item>
                    <el-form-item label="提成金额：">
                        {{info.commissionFee}}
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="common_block mt20">
            <div class="head head-default">商品信息</div>
            <div class="contener">
                <el-table :data="info.detailList" style="width: 100%">
                    <el-table-column prop="xxx" label="商品图片">
                        <template slot-scope="props">
                            <img class="img" v-if="props.row.itemImageUrl" :src="props.row.itemImageUrl">
                        </template>
                    </el-table-column>
                    <el-table-column prop="itemName" label="商品名称">
                    </el-table-column>
                    <el-table-column prop="count" label="购买数量">
                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="totalFee" label="金额">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="common_block mt20">
            <div class="head head-default">物流信息</div>
            <div class="contener">
                <el-form label-width="100px">
                    <el-form-item label="物流公司：" prop="xxx">
                        {{info.logisticsCompany}}
                    </el-form-item>
                    <el-form-item label="运单号：" prop="xxx">
                        {{info.logisticsNo}}
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                info:{
                }
            };
        },
        watch:{
    
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                if(this.$route.query.orderNo){
                    this.getInfo();
                }
            });
        },
        methods: {
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/order/getOrderDetail',
                    data:{
                        orderNo:this.$route.query.orderNo
                    },
                    success:(data=>{
                        this.info = data.data;
                    })
                })
            },
        },
        
    };
</script>